/*-------------------------------------------------------------------
Team CSS for Isotope(Galerie) and the coustom dropdown for Filtering
---------------------------------------------------------------------*/
.wrapper-dropdown-1 {
        /* Size and position */
        position: relative;
        /* Enable absolute positionning for children and pseudo elements */
        width: 220px;
        padding: 10px;
        margin: 0 auto;
        margin-right:0;
        /* Styles */
        background-color: #6ca1e0;
        background: #6ca1e0;
        color: white !important;
        text-shadow: none;
        box-shadow: none;
        -moz-box-shadow: #5b90cf 0px 2px 0px 0px;
        -webkit-box-shadow: #5b90cf 0px 2px 0px 0px;
        box-shadow: #5b90cf 0px 2px 0px 0px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        /* Font settings */
        font-weight: bold;
        z-index: 100;
    }
    .wrapper-dropdown-1:after {
        content:"";
        width: 0;
        height: 0;
        position: absolute;
        right: 16px;
        top: 50%;
        margin-top: -6px;
        border-width: 6px 0 6px 6px;
        border-style: solid;
        border-color: transparent #fff;
    }
    .wrapper-dropdown-1 .dropdown {
        /* Size & position */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* Styles */
        background: #5b90cf;
        list-style: none;
        font-weight: normal;
        /* Cancels previous font-weight: bold; */
        /* Hiding */
        opacity: 0;
        display:none;
        pointer-events: none;
    }
    .wrapper-dropdown-1 .dropdown li {
        margin-left: 0;
    }
    .wrapper-dropdown-1 .dropdown li a {
        display: block;
        text-decoration: none;
        color: #fff;
        padding: 10px 20px;
    }
    /* Hover state */
    .wrapper-dropdown-1 .dropdown li:hover a {
        background: #6ca1e0;
    }
    /* Active state */
    .wrapper-dropdown-1.active .dropdown {
        opacity: 1;
        display:inline-block;
        pointer-events: auto;
    }
    .wrapper-dropdown-1.active:after {
        border-color: #9bc7de transparent;
        border-width: 6px 6px 0 6px;
        margin-top: -3px;
    }
    .wrapper-dropdown-1.active {
        background-color: #6ca1e0;
        background: #6ca1e0;
    }
    .dropdown {
        text-shadow: none;
        box-shadow: none;
        -moz-box-shadow: #5b90cf 0px 2px 0px 0px;
        -webkit-box-shadow: #5b90cf 0px 2px 0px 0px;
        box-shadow: #5b90cf 0px 2px 0px 0px;
        -webkit-border-bottom-right-radius: 3px;
        -moz-border-bottom-right-radius: 3px;
        border-bottom-right-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -moz-border-bottom-left-radius: 3px;
        border-bottom-left-radius: 3px;
        outline: none;
        cursor: pointer;
    }
    /* No CSS3 support */
    .no-opacity .wrapper-dropdown-1 .dropdown, .no-pointerevents .wrapper-dropdown-1 .dropdown {
        display: none;
        opacity: 1;
        /* If opacity support but no pointer-events support */
        pointer-events: auto;
        /* If pointer-events support but no pointer-events support */
    }
    .no-opacity .wrapper-dropdown-1.active .dropdown, .no-pointerevents .wrapper-dropdown-1.active .dropdown {
        display: block;
    }
@media screen and (max-width: 450px) {
    
    .wrapper-dropdown-1 {
        /* Size and position */
        position: relative;
        /* Enable absolute positionning for children and pseudo elements */
        width: 220px;
        padding: 10px;
        margin: 0 auto;
        margin-right: auto;
        
    }
}

/*------
 Isotope
-------*/
#teamPics{
    padding:0;
}

.galerie{
    max-width: 1108px;
    margin: 0 auto;
}

    #teamPics .item {
        max-width: 22%;
        margin:1%;
        min-width:200px;
    }
    #teamPics .item-selected {
        max-width:45.77%;
        margin:1%;
    }
    .isotope, .isotope .isotope-item {
        /* change duration value to whatever you like */
        -webkit-transition-duration: 0.8s;
        -moz-transition-duration: 0.8s;
        -ms-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
        transition-duration: 0.8s;
    }
    .isotope {
        -webkit-transition-property: height, width;
        -moz-transition-property: height, width;
        -ms-transition-property: height, width;
        -o-transition-property: height, width;
        transition-property: height, width;
    }
    .isotope .isotope-item {
        -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
        -o-transition-property: -o-transform, opacity;
        transition-property: transform, opacity;
    }
    /**** disabling Isotope CSS3 transitions ****/
    .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
        -webkit-transition-duration: 0s;
        -moz-transition-duration: 0s;
        -ms-transition-duration: 0s;
        -o-transition-duration: 0s;
        transition-duration: 0s;
    }
    /**** Isotope filtering ****/
    .isotope-item {
        z-index: 2;
    }
    .isotope-hidden.isotope-item {
        pointer-events: none;
        z-index: 1;
    }
    #filter-select {
        margin-bottom:0;
        margin-top:15px;
    }
    #filter {
        list-style: none;
        text-decoration:none;
    }
    #filter li {
        list-style-type: none;
        text-decoration:none;
        float:left;
        clear: left;
    }
    #teamPics .item img {
        position: relative;
        width: 100%;
        /* for IE 6 */
    }
    .workerInfo {
        position: absolute;
        bottom:0;
        left: 0;
        padding:5px;
        background-color: rgba(255, 255, 255, 0.7);
        width: 100%;
    }
    .workerInfo h6 {
        font-size:90%;
        margin:0;
        color: #393b40;
    }
    .workerInfo h5 {
        font-size:130%;
        margin: 5px 0 5px 0;
        line-height: 1;
        color: #393b40;
    }
@media screen and (max-width: 450px) {
    .item {
        max-width: 100%;
        margin:1%;
        margin-bottom:10px;
        min-width:400px;
    }
    .item-selected {
        max-width: 100%;
        margin:1%;
        min-width:200px;
    }
    .workerInfo h6 {
        font-size:150%;
        margin:0;
        color: #393b40;
    }
    .workerInfo h5 {
        font-size:200%;
        margin: 5px 0 5px 0;
        line-height: 1;
        color: #393b40;
    }
}
